<template>
  <div class="home">
    <Nav @changeList ="changeList"></Nav>
    <div class="layout">
      <Layout>
        <Content class="p50">
          <Breadcrumb class="crumbs">
            <BreadcrumbItem v-for="(el, index) in proList" :key="index">{{
              el
            }}</BreadcrumbItem>
          </Breadcrumb>
          <Card class="wrap">
            <div class="main">
              <Row>
                <Col :xs="14" :md="17" :lg="19">
                  <Row>
                    <Col class="card-img">
                      <img
                        :src="userInfo.avatar"
                        alt=""
                      />
                    </Col>
                    <Col>
                      <Row>
                        <Col>
                          早上好,
                          <h3>{{ userInfo.username }}</h3>
                        </Col>
                      </Row>
                      <Row>
                        <Col
                          ><span
                            >你有<strong>{{ userInfo.messages }}</strong
                            >条信息待回复</span
                          ></Col
                        >
                      </Row></Col
                    >
                  </Row>
                </Col>
                <Col :xs="10" :md="7" :lg="5">
                  <Button type="primary" :to="{ name: 'Post' }"
                    >创建新话题</Button
                  >
                </Col>
              </Row>
            </div>
          </Card>
        </Content>
        <Content class="p50 hot">
          <Card dis-hover>
            <p class="all-title">热门话题</p>
            <Row :gutter="12">
              <Col :xs="24" :md="12" :lg="6" v-for="item in (newList)" :key="item.aid">
                <Card class="card">
                  <img
                    :src="item.imgUrl"
                    alt=""
                  />
                  <div slot="extra">{{ item.createTime }}</div>
                  <p class="outline">{{ item.outline?item.outline:"欢迎来看" }}</p>
                  <!-- <Row>
                    <Col :sm="8">ssss </Col>
                    <Col :sm="8" offset="8">
                      <Icon class="heart" type="ios-heart"></Icon>
                      dasda
                    </Col>
                  </Row> -->
                  <Row class="data-wrap" justify="space-between">
                    <Col>
                      <Button
                        type="primary"
                        :to="{ name: 'Detail', params:{
                          aid:item.aid
                        }}"
                        >查看详情</Button
                      >
                    </Col>
                    <Col class="data-details">
                      <Icon type="ios-eye"></Icon>
                      {{ item.eye }}
                      <Icon class="heart" type="ios-heart" @click="love"></Icon>
                      {{ item.praise }}
                    </Col>
                  </Row>
                </Card>
              </Col>
            </Row>
              <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="aList.length">
    </el-pagination>
  </div>
          </Card>
        </Content>
      </Layout>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  name: "Home",
  data() {
    return {
       currentPage: 1,
      proList: ["首页", "推荐页"],
      // userInfo: {
      // },
      aList:[],
      pageSize:"4",
      pageNowNum:"1"
    };
  },
  computed:{
    newList(){
      let arr
          arr =this.aList
          arr = arr.reverse() 
        return  arr.slice(this.pageSize*(this.pageNowNum -1),this.pageSize*this.pageNowNum)
    },
    ...mapState("user",["userInfo"])
  },
  methods: {
    changeList(data){
      this.aList = data
    },
      handleSizeChange(val) {
        this.pageSize =val
        this.aList.reverse()

        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNowNum =val
        this.aList.reverse()
        // console.log(`当前页: ${val}`);
      },
    love(e) {
      e.target.style.color = "red";
      this.card.praise++;
    },
  },
  beforeCreate() {
      this.$userApi.getUserInfo().then((res) => {
        console.log(res);
        this.$store.dispatch("user/setInfo",res.data)
      });
       this.$artcle.getaList().then((res) => {
      if (res.ret === 200) {
      //  console.log(res.data);
       this.aList = res.data
      }
    });
  },
  mounted() {
    this.$userApi
      .sendImg({
        data:{
       
        },
         processData: false,// 告诉axios不要去处理发送的数据(重要参数)
          contentType: false,   // 告诉axios不要去设置Content-Type请求头
      }) 
     
  },

};
</script>

<style lang="scss" scoped>
.home {
  min-width: 800px;
  .wrap {
    background: url("https://img1.baidu.com/it/u=3134294633,3735068237&fm=26&fmt=auto");
    //   background-position:center ;
    background-size: cover;
  }
}
.p50 {
  padding: 0 10%;
}
.main {
  height: 30px;
  padding: 90px 10px;
  padding-top: 145px;
  color: rgb(219, 213, 213);
  h3 {
    display: inline-block;
    margin-bottom: 5px;
  }
  a {
    position: relative;
    top: 20px;
    width: 60%;
  }
}
.crumbs {
  text-align: left;
  text-indent: 10px;
  height: 30px;
  line-height: 30px;
}
.card-img {
  img {
    width: 60px;
    margin-right: 10px;
    border-radius: 5px;
  }
}
.hot {
  margin-top: 30px;
  .all-title {
    height: 40px;
    padding-top: 12px;
    line-height: 20px;
    text-align: left;
    width: 100px;
    font-size: 16px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 25px;
  }
  .card {
    color: rgb(15, 15, 15);
    margin-bottom: 20px;
    white-space: nowrap;
    img {
      width: 100%;
      height: 150px;
    }
    p {
      white-space: nowrap;
      text-indent: 1rem;
      overflow: hidden;
      width: 100%;
      text-overflow: ellipsis;
    }
    .outline {
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid #eee;
    }
    .data-wrap {
      text-align: left;
      padding-top: 10px;
      .data-details {
        text-align: right;
        line-height: 32px;
      }
    }
    .heart {
      color: rgb(189, 187, 185);
    }
  }
}
</style>